import { EBomPlankGrooveType, Groove } from '@/types';
import { xyz } from '@/utils';
import { Edges, Extrude, Line } from '@react-three/drei';
import { Highlight } from './HighlightElement';
import { getGrooveShapeAndMatrix } from '../utils';
import { findColor, colorConfig } from './HighlightElement';
import { ArrowLine } from './ArrowLine';

export function BaseGroove(props: {
  width: number;
  height: number;
  thickness: number;
  groove: Groove;
  highlight: Highlight;
}) {
  const { groove, highlight } = props;

  const { shape, translation, euler } = getGrooveShapeAndMatrix(groove, {
    width: props.width,
    height: props.height,
    thickness: props.thickness,
  });

  const lineColor = 'blue';

  return (
    <>
      <Extrude
        rotation={euler}
        position={translation}
        args={[
          shape,
          {
            depth: -groove.depth,
          },
        ]}
      >
        <meshStandardMaterial
          args={[
            {
              depthWrite: false,
              color: findColor(
                colorConfig.groove[
                  highlight.grooves.includes(groove.grooveId)
                    ? 'highlight'
                    : 'normal'
                ],
                groove.plankFaceId,
              ),
              transparent: true,
              opacity: 0.5,
            },
          ]}
        />
        <Edges scale={1} color="white" />
      </Extrude>
      {groove.start &&
        (groove.type === EBomPlankGrooveType.LAMELLO ? (
          <ArrowLine
            startPoint={xyz(groove.start)}
            endPoint={xyz(groove.end)}
            color={'lightgreen'}
            lineWidth={2}
          />
        ) : (
          <Line
            points={[groove.start, groove.end].map(xyz)}
            color={lineColor}
            lineWidth={1}
            dashed={false}
          />
        ))}
    </>
  );
}
